<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--引入header中 公共导航部分 -->
<head th:replace="header::header-commo(首页)">
</head>


<body>
<!--引用公共搜索栏部分-->
<header th:replace="header::header-nav">
</header>
<!--主区域-->
<div class="container" style="margin-top: 10px;">
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="row" style="margin-bottom: 10px;">
                <div class="col-md-5 col-xs-5">
                    <div>
                        <a href="#"><img class="img-responsive" th:src="@{'/upload/'+${item.image}}"
                                         src="img/goods1.jpg"/></a>
                    </div>
                </div>
                <div class="col-md-7 col-xs-7 product-info">
                    <div>
                        <h3 class="pord-name" th:text="${item.name}">布隆雕塑</h3>
                    </div>
                    <div class="pord-price clearfix">
                        <span class="pord-dispri">￥<strong th:text="${item.shopPrice}">98.00</strong></span>
                        <span class="pord-orpri" th:text="${item.marketPrice}">￥98.00</span>
                    </div>
                    <!--<div class="pord-detailbox clearfix">
                        <div class="pull-left pord-sold">已售：<span>1448</span></div>
                        <div class="pull-left pord-totalcom">累计评价：<span class="commentNum">48</span></div>
                    </div>-->
                    <div id="blk_detail_main_btn">

                        <form action="" th:action="@{/cart/add}" method="post">
                            <div class="mt10 pord-num clearfix">
                                <input type="hidden" name="id" th:value="${item.id}" value="" >
                                <label class="pull-left pt10">数量</label>
                                <div class="pull-left ml42">
                                    <a href="javascript:;" id="js-buy-min"
                                       class=" pull-left num-plus numbtn num-plus btn_detail_main_buy_min"><i
                                            class="ico-detail">-</i></a>
                                    <input type="text" size="2" id="js-buy-num" name="count"
                                           class="fl nummidbtn num inpt_detail_main_buy_num" value="1">
                                    <a href="javascript:;" id="js-buy-plus"
                                       class=" pull-left numbtn num-minus btn_detail_main_buy_plus"><i
                                            class="ico-detail">+</i></a>
                                </div>
                                <span class="pord-stock" th:text="'（库存：'+${item.num} +'）'">888</span>
                            </div>
                            <div class="pord-btn clearfix">
                                <button type="submit" id="btn_detail_cart_add" class="fl joincart-btn">加入购物车</button>
                                <button type="submit" id="btn_detail_cart_buy" class="fl ml30 buy-btn">立即购买</button>
                                <a href="javascript:;" class="fl btn-collect">
                                    <i class="ico-detail ico-collect"></i>
                                    <span>收藏</span>
                                </a>
                                <a href="javascript:;" class="fl btn-collected" style="display: none">
                                    <i class="ico-detail ico-collect"></i>
                                    <span>已收藏</span>
                                </a>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
                        <ul id="myTabs" class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home"
                                   aria-expanded="true">商品介绍</a>
                            </li>
                            <li role="presentation">
                                <a href="#profile" role="tab" id="profile-tab" data-toggle="tab"
                                   aria-controls="profile">商品评论</a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content ">
                            <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
                                <img class="img-responsive center-block" th:src="@{'/upload/'+${item.idesc}}"
                                     src="img/info1.jpg"/>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object" th:src="@{'/img/g.jpg'}" src="/img/g.jpg"
                                                 alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">商品评分</h4> 非常不错啊！！！
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<footer th:replace="footer::footer-comm">
</footer>

<script th:inline="javascript">
    //写入口函数
    $(function () {
        //1.初始化获取库存数量
        var num = [[${item.num}]] ;
        //2.获取显示数量的控件
         var $num = $("#js-buy-num");
        //3.点击减号按钮，$num值减1
        $("#js-buy-min").click(function () {
            $num.val($num.val()-1<=1 ? 1 : $num.val()-1 )
        });

        //4.点击加号按钮，$num+1
        $("#js-buy-plus").click(function () {
           var maxnum =$num.val()
            $num.val(maxnum++  >= num ? num : maxnum++  )
        });
    });
</script>
</body>

</html>